import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider, WeaNewScroll, WeaSearchGroup, WeaFormItem, WeaDialog, WeaTableEdit } from 'ecCom';
import { Button, Spin, message } from 'antd';
import { WeaSwitch } from 'comsMobx';
import { toJS } from 'mobx';
import AlertModal from '../../public/AlertModal';

import * as RD_APIS from '../../apis/receiveDoc';

const { getLabel } = WeaLocaleProvider;

@inject('receiveDoc')
@observer
class SetWFDia extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { receiveDoc } = this.props;
    const { ifShowSetWFDia } = receiveDoc;
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@b0y50y`}
        title={getLabel('517308', '配置流程')}
        visible={ifShowSetWFDia}
        icon={'icon-coms-official'}
        iconBgcolor={'#F14A2D'}
        onCancel={this.closeDialog}
        buttons={[(
          <Button
            ecId={`${this && this.props && this.props.ecId || ''}_Button@iecxa9@save`}
            type={'primary'}
            onClick={this.save}
          >
            {getLabel('30986', '保存')}</Button>)]}
        style={{ height: 500 }}
      >
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@65npel`} height={500}>
          {this.getForm()}
          {this.getTableEdit()}
        </WeaNewScroll>

      </WeaDialog>);
  }

  getForm() {
    const { receiveDoc } = this.props;
    let { setWfDiaForm, setWfDiaFormCon } = receiveDoc;
    setWfDiaFormCon = toJS(setWfDiaFormCon);
    const { isFormInit } = setWfDiaForm;
    let group = [];
    isFormInit && setWfDiaFormCon.map((c, index) => {
      let items = [];
      c.items.map((field) => {
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8a61xe@${field.domkey[0]}`}
            label={`${field.label}`}
            labelCol={{ span: `${field.labelcol}` }}
            error={setWfDiaForm.getError(field)}
            wrapperCol={{ span: `${field.fieldcol}` }}
            tipPosition={'bottom'}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@gzeb6h@${field.domkey[0]}`}
              fieldConfig={field}
              form={setWfDiaForm}
              onChange={() => { this.props.getNewDatasOfTable(); }}
            />
          </WeaFormItem>),
          colSpan: 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@k05ou5@${index}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} col={1} />);
    });
    return group;
  }

  getTableEdit() {
    const { receiveDoc } = this.props;
    const { tableEditCols, tableEditDatas, tableEditTitle, ifShowTableEdit, ifShowLoadingAnimation, setStoreAttr } = receiveDoc;
    if (!ifShowTableEdit && !ifShowLoadingAnimation) {
      return null;
    } else if (ifShowLoadingAnimation) {
      return (
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@54brg4`} tip="">
          <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@ceygzj`}
            columns={tableEditCols}
            datas={tableEditDatas}
            title={tableEditTitle}
            showAdd={false}
            showDelete={false}
            showCopy={false}
            getRowSelection={() => null}
          />
        </Spin>);
    } else if (ifShowTableEdit) {
      return (
        <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@gbb6qn`}
          columns={tableEditCols}
          datas={tableEditDatas}
          title={tableEditTitle}
          showAdd={false}
          showDelete={false}
          showCopy={false}
          getRowSelection={() => null}
          onChange={data => setStoreAttr('tableEditDatas', data)}
        />);
    }
  }

  closeDialog = () => {
    const { receiveDoc } = this.props;
    const { setStoreAttr, setWfDiaForm } = receiveDoc;
    setStoreAttr('ifShowSetWFDia', false);
    setWfDiaForm.reset();
  }

  save = () => {
    const { receiveDoc } = this.props;
    const { setStoreAttr, setWfDiaForm, tableEditDatas, companyid, chageFlag, sn, onSearch } = receiveDoc;
    setWfDiaForm.validate().then((f) => {
      if (f.isValid) {
        const params = { ...setWfDiaForm.getFormParams(), companyid, chageFlag, sn, datas: JSON.stringify(toJS(tableEditDatas)) };
        RD_APIS.setWorkflowConfig(params).then((data) => {
          if (data.api_status) {
            message.success('设置成功');
            setStoreAttr('ifShowSetWFDia', false);
            onSearch({ behavior: 'search' });
          } else {
            message.error(data.message);
          }
        });
      } else {
        AlertModal('warning', getLabel('384434', '您还有必填项未填写'));
      }
    });
  }
}

export default SetWFDia;
